<template>
  <div id="NewsInformation">
    <div class="container">
      <div class="container text-center">
        <h3>最新公告</h3>
      </div>
      <div class="searchBox">
        <Input v-model="queryParams.title" search enter-button="查找" placeholder="请输入公告标题查找" @on-search="search" />
      </div>
      <div class="news-container container-fuild">
        <div v-for="(item, index) in newsList" :key="index" class="wow fadeIn list" @click="toNewDetail(item)">
          <div class="listItem">
            <div class="circle">
              <img src="../assets/img/circle.png">
              <i class="line center-block"></i>
            </div>
            <div class="content">
              <p>{{ item.title }}</p>
              <p>{{ item.content }}</p>
            </div>
          </div>
          <div class="time">
            <p>{{ item.createTime }}</p>
          </div>
        </div>
      </div>
      <Page :total="total" size="small" show-elevator show-sizer @on-change="pageChange" @on-page-size-change="sizeChange"/>
    </div>
  </div>
</template>
<script>
import { WOW } from 'wowjs';
import { getNoticeApi } from '@/api/api';
export default {
  name: 'NewsInformation',
  data() {
    return {
      currIndex: 0,
      newsList: [],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        title: ''
      },
      total: 0
    }
  },
  mounted() {
    var wow = new WOW();
    wow.init();
  },
  created() {
    this.getNotice();
  },
  methods: {
    getNotice() {
      getNoticeApi(this.queryParams).then(res => {
        this.newsList = res.data.rows;
        this.total = res.total;
      })
    },
    search() {
      this.queryParams.pageNum = 1;
      this.getNotice();
    },
    pageChange(e) {
      this.queryParams.pageNum = e;
      this.getNotice();
    },
    sizeChange(e) {
      this.queryParams.pageSize = e;
      this.getNotice();
    },
    /** 前往新闻详情页面 */
    toNewDetail(item) {
      let route = {
        name: 'newsinformationdetail',
        query: {
          id: item.id
        }
      }
      this.$router.push(route)
    }
  }
}
</script>
<style scoped>
#NewsInformation {
  min-height: 500px;
}

.nav {
  margin: 20px 0;
}

.list {
  border: 1px solid #333;
  padding: 20px;
  margin-bottom: 10px;
}

.list:hover {
  color: #1e73be;
  border-color: #1e73be;
}

.listItem {
  display: flex;
}

.circle {
  margin-right: 20px;
}

.circle>img {
  width: 20px;
  height: 20px;
}

.time>p {
  font-size: 22px;
  margin: 5px 0;
}

.searchBox {
  margin: 10px 0;
}

@media screen and (max-width: 767px) {
  .news-container>li {
    width: 100%;
  }

  .news-container>li>.content {
    width: 70%;
    text-align: left;
    float: right;
  }

  .news-container>li>.time {
    width: 30%;
    text-align: left;
    float: right;
  }

  .news-container>li>.circle {
    display: none;
  }
}
</style>
